<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" :dashboardData="dashboardData"/>

    <el-row :gutter="32">
      <el-col :xs="50" :sm="45" :lg="12">
        <div class="chart-wrapper" style="height: 330px; overflow-y: auto;">
          <strong align="center">营销会员销售排行榜</strong>
          <hr/>
          <div class="grid-container">
            <el-row :gutter="10">
              <el-col :span="6"><h4>名次</h4></el-col>
              <el-col :span="6"><h4>姓名</h4></el-col>
              <el-col :span="6"><h4>销售额</h4></el-col>
              <el-col :span="6"><h4>入职日期</h4></el-col>
            </el-row>
            <el-row v-for="(item, index) in dashboardData.salesRank" :key="index" :gutter="10" >
              <el-col :span="6"><div class="grid-content bg-purple">{{ index + 1 }}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">{{ item.memberFullname }}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">{{ item.ordersAmount }}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">{{ item.joinDate }}</div></el-col>
            </el-row>
          </div>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper" style="height: 330px;">
          <strong>近一周交易统计</strong>
          <hr/>
          <!-- <el-select v-model="selectedTimeRange" align="right" placeholder="选择时间范围" @change="updateChartData">
            <el-option v-for="item in timeRanges" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
          <div class="echarts" ref="echarts" style="width: 100%; height: 280px;"></div>
          <bar-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="12" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <strong>商城信息统计</strong>
          <hr/>
          <div class="grid-container">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-row class="row">
                  <el-col :span="12"><div class="grid">{{ dashboardData.members }}</div></el-col>
                </el-row>
                <el-row class="row">
                  <el-col :span="12"><div class="grid">会员总数</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row class="row">
                  <el-col :span="12"><div class="grid">{{ dashboardData.goodsSum }}</div></el-col>
                </el-row>
                <el-row class="row">
                  <el-col :span="12"><div class="grid">商品总数</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row class="row">
                  <el-col :span="12"><div class="grid">{{dashboardData.salesMemberSum}}</div></el-col>
                </el-row>
                <el-row class="row">
                  <el-col :span="12"><div class="grid">销售会员总数</div></el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="grid-row">
              <el-col :span="8">
                <el-row class="row">
                  <el-col :span="12"><div class="grid">{{dashboardData.orderSumByLastWeek}}</div></el-col>
                </el-row>
                <el-row class="row">
                  <el-col :span="12"><div class="grid">近七天订单数总数</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row class="row">
                  <el-col :span="12"><div class="grid">{{dashboardData.weeklySales}}</div></el-col>
                </el-row>
                <el-row class="row">
                  <el-col :span="12"><div class="grid">近七天销售额（元）</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row class="row">
                  <el-col :span="12"><div class="grid">{{dashboardData.refundAmountByLastWeek}}</div></el-col>
                </el-row>
                <el-row class="row">
                  <el-col :span="12"><div class="grid">近七天退款金额（元）</div></el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <strong>快捷入口</strong>
          <hr/>
          <div class="grid-container">
            <el-row :gutter="20">
              <el-col :span="4" >
                <el-row class="row1"  >
                  <el-col :span="12">
                    <div class="grid1" >
                    <i @click="toDevice()" class="el-icon-s-goods"></i>
                  </div>
                </el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1" >发布设备</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toVideo()" class="el-icon-s-claim"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">发布视频</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toMemberManager()" class="el-icon-s-custom"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">会员管理</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i  @click="toSendMsg()" class="el-icon-s-grid"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">发布咨询</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i  @click="toPayAudit()" class="el-icon-s-platform"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">结算审核</div></el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="grid-row">
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toTakeAudit()" class="el-icon-time"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">提现审批</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toOrder()" class="el-icon-setting"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">订单处理</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toSale()" class="el-icon-video-camera"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">分销管理</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toStatistics()" class="el-icon-s-opportunity"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">统计分析</div></el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1"><i @click="toSetParam()" class="el-icon-s-shop"></i></div></el-col>
                </el-row>
                <el-row class="row1">
                  <el-col :span="12"><div class="grid1">参数设置</div></el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '@/components/components/PanelGroup'
import LineChart from '@/components/components/LineChart'
import RaddarChart from '@/components/components/RaddarChart'
import PieChart from '@/components/components/PieChart'
import BarChart from '@/components/components/BarChart'
import TransactionTable from '@/components/components/TransactionTable'
import TodoList from '@/components/components/TodoList'
import BoxCard from '@/components/components/BoxCard'
import { allData } from '@/api/server/indexdata.js'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      selectedTimeRange: 'week',  // 默认选择时间范围
      timeRanges: [
        { label: '近一周', value: 'week' },
        { label: '近一个月', value: 'month' },
        { label: '近一年', value: 'year' }
      ],
      dashboardData: {},
      chartData: [],
      chartLabels: []
    };
  },
    mounted() {
    },
  created(){
    this.fetchDashboardData();
  },
  methods: {
    fetchDashboardData() {
      allData().then(response => {
        console.log('Full response:', response); // 打印完整的响应
        this.dashboardData = response.data;
        if (this.dashboardData.ordersOfLastWeek.length === 0) {
             // 如果没有数据，可以设置一个默认的图表数据
            this.chartLabels = [];
            this.chartData = [];
        } else {
            // 处理近一周交易统计数据
            this.chartLabels = this.dashboardData.ordersOfLastWeek.map(item => item.date);
            this.chartData = this.dashboardData.ordersOfLastWeek.map(item => item.totalAmount);
            console.log('我的chartLabels', this.chartLabels);
            console.log('我的chartData', this.chartData);
              // 如果不满一周的数据，可以使用其他方式标记
            if (this.dashboardData.ordersOfLastWeek.length < 7) {
              // 添加一个标记来表示不完整的数据
              this.chartLabels.push('无一周数据');
              this.chartData.push(null); // 或者添加一个特殊值来表示
            }
        }
          // 数据更新后再初始化图表
          this.initEcharts();
      }).catch(error => {
          console.error("Error fetching dashboard data:", error);
      });
    },
    toDevice(){
      this.$confirm('是否转发布设备?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/product/device")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toVideo(){
      this.$confirm('是否转发布视频?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/product/content")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toMemberManager(){
      this.$confirm('是否转会员管理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/members/data")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toSendMsg(){
      this.$confirm('是否转发布咨询?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/message/picture")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toPayAudit(){
      this.$confirm('是否转结算审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/distribution/auditing")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toTakeAudit(){
      this.$confirm('是否转提现审批?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/distribution/auditing")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toSale(){
      this.$confirm('是否转分销管理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/distribution/auditing")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toOrder(){
      this.$confirm('是否转订单处理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/order/device")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toStatistics(){
      this.$confirm('是否转统计分析?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/index")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    toSetParam(){
      this.$confirm('是否转参数设置?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$router.push("/system/config")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });  
        })
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    initEcharts() {
      let myChart = this.$echarts.init(this.$refs.echarts)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.chartLabels, // 替换为从后端获取的日期数据
            axisLabel: {
            rotate: 45,
            interval: 0
          }
            // ['09-08', '09-09', '09-10', '09-11', '09-12', '09-13', '09-14']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '近一周的数据',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.chartData // 替换为从后端获取的销售额数据
            // [140, 232, 101, 264, 90, 340, 250]
          },
        ]
      };

      myChart.setOption(option);
      // 设置resize属性为true，使图表自适应容器大小
    window.addEventListener("resize", () => {
    myChart.resize();
  });
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    height: 300px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.bg-purple {
}
.grid-content {
  padding: 5px;  /* 调整内边距 */
  margin: 0;  /* 调整外边距 */
  }
  .grid-container {
    margin-top: 10px;
  }
  span {
    position: relative;
    float: right;
    font-weight: bolder;
  }
  .echarts {
  position: relative;
  margin-top: -35px;
}
.grid {
  width: 200px;
  // border: red 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.grid1 {
  width: 100px;
  // border: red 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.grid-row {
  margin-top: 50px;
}
.row {
  margin-top: 15px;
}
.row1 {
  margin-top: 15px;
  margin-left: 25px;
}
.grid1 {
  cursor: pointer;
  transition: color 0.3s; /* 添加过渡效果 */
}
</style>
